<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>弹窗</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <link rel="icon" href="../img/web/web.ico"/>
    <link rel="stylesheet" href="../layui/css/layui.css"/>
    <link rel="stylesheet" href="../css/app.css"/>
<body ontouchstart="">

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">

        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">类型</div>
                <div class="layui-card-body">
                    <div class="layui-btn-container">
                        <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary" demo-type="alert">弹窗</button>
                        <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary" demo-type="confirm">确认</button>
                        <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary" demo-type="msg">消息</button>
                        <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary" demo-type="tips">提示</button>
                        <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary" demo-type="page">页面</button>
                        <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary" demo-type="frame">窗体</button>
                        <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary" demo-type="pass">口令输入</button>
                        <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary" demo-type="tab">选项卡</button>
                        <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary" demo-type="photo">相册</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">基础</div>
                <div class="layui-card-body">
                    <div class="layui-btn-container">
                        <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary" demo-type="baseMsg">信息框</button>
                        <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary" demo-type="baseConfirm">询问</button>
                        <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary" demo-type="baseTips">提示</button>
                        <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary" demo-type="basePage">页面</button>
                        <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary" demo-type="baseFrame">iframe</button>
                        <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary" demo-type="baseWindow">窗体</button>
                        <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary" demo-type="baseLoading">加载</button>
                        <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary" demo-type="basePass">口令输入</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">加载</div>
                <div class="layui-card-body">
                    <div class="layui-btn-container">
                        <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary" demo-type="loading1">类型1</button>
                        <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary" demo-type="loading2">类型2</button>
                        <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary" demo-type="loading3">类型3</button>
                        <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary" demo-type="loading4">类型4</button>
                        <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary" demo-type="loading5">类型5</button>
                        <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary" demo-type="loading6">类型6</button>
                        <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary" demo-type="loading7">类型7</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">TIPS</div>
                <div class="layui-card-body">
                    <div class="layui-btn-container">
                        <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary" demo-type="tipsTop">上</button>
                        <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary" demo-type="tipsBottom">下</button>
                        <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary" demo-type="tipsLeft">左</button>
                        <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary" demo-type="tipsRight">右</button>
                        <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary" demo-type="tipsNoKill">保留上一个TIPS</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">更多</div>
                <div class="layui-card-body">
                    <div class="layui-btn-container">
                        <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary" demo-type="windowMax">最大化</button>
                        <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary" demo-type="offsetBottom">offsetBottom</button>
                        <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary" demo-type="notice">公告</button>
                        <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary" demo-type="confirmTrans">透明询问框</button>
                    </div>
                </div>
            </div>
        </div>
        <!--<div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">vip-admin 风格</div>
                <div class="layui-card-body">
                    <div class="layui-btn-container">
                        <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary" demo-type="customized">定制</button>
                        <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary" demo-type="add">增加</button>
                    </div>
                </div>
            </div>
        </div>-->

    </div>
</div>

<script type="text/javascript" src="../layui/layui.js"></script>
<script type="text/javascript">
layui.config({base: '../js/'}).use(['app','layer'],function(){
    var $ = layui.$,app = layui.app,layer = layui.layer;

    /* 触发弹层 */
    var active = {
        close: function(){layer.closeAll('loading');}

        ,alert: function(){
            layer.alert('你好，体验者');
        }
        ,confirm: function(){
            layer.confirm('您是如何看待前端开发？', {
                btn: ['重要','奇葩'] //按钮
            }, function(){
                layer.msg('的确很重要', {icon: 1});
            }, function(){
                layer.msg('也可以这样', {
                    time: 20000, //20s后自动关闭
                    btn: ['明白了', '知道了']
                });
            });
        }
        ,msg: function(){
            layer.msg('玩命提示中');
        }
        ,tips: function(){
            layer.tips('Hi，我是一个提示', this, {tips: 1});
        }
        ,page: function(){
            layer.open({
                title:'页面层'
                ,type: 1
                //,skin: 'layui-layer-rim'
                ,shadeClose: true
                ,area: ['80%', '300px']
                ,content: '<div style="padding: 20px;">放入任意HTML</div>'
            });
        }
        ,frame: function(){
            layer.open({
                type: 2
                ,content: 'http://www.vip-admin.com/'
                ,shadeClose: true
                ,area: ['100%', '80%']
                ,maxmin: true
            });
        }
        ,pass: function(){
            layer.prompt({title: '输入任何口令，并确认', formType: 1}, function(pass, index){
                layer.close(index);
                layer.prompt({title: '随便写点啥，并确认', formType: 2}, function(text, index){
                    layer.close(index);
                    layer.msg('演示完毕！您的口令：'+ pass +'<br>您最后写下了：'+text);
                });
            });
        }
        ,tab: function(){
            layer.tab({
                area: ['100%', '80%']
                ,tab: [{
                    title: 'TAB1',
                    content: '<div style="padding:20px;">内容1</div>'
                },{
                    title: 'TAB2',
                    content: '<div style="padding:20px;">内容2</div>'
                }]
            });
        }
        ,photo: function(){
            $.getJSON('./../json/demo-photo.json', function(json){
                layer.photos({
                    photos: json //格式见API文档手册页
                });
            });
        }

        ,baseMsg: function(){
            var icon = -1;
            (function changeIcon(){
                var index = layer.alert('Hi，你好！ 点击确认更换图标', {
                    icon: icon,
                    shadeClose: true,
                    title: icon === -1 ? '初体验 - layer '+layer.v : 'icon：'+icon + ' - layer '+layer.v
                }, changeIcon);
                if(8 === ++icon) layer.close(index);
            }());
        }
        ,baseConfirm: function(){
            layer.confirm('真的吗？', function(index){
                layer.msg('哦')
                layer.close(index);
            });
        }
        ,baseTips: function(){
            layer.msg('玩了命提示中');
        }
        ,basePage: function(){
            layer.open({
                type: 1,
                skin: 'layui-layer-rim',
                area: ['420px', '240px'],
                content: '<div style="padding: 10px;">任意html内容</div>'
            });
        }
        ,baseFrame: function(){
            layer.open({
                type: 2,
                title: '博客社区',
                shadeClose: true,
                shade: 0.8,
                area: ['375px', '500px'],
                content: 'http://blog.vip-admin.com/'
            });
        }
        ,baseWindow: function(){
            layer.open({
                type: 2,
                title: '百度一下',
                shade: false,
                maxmin: true,
                area: ['90%', '90%'],
                content: 'http://www.baidu.com/'
            });
        }
        ,baseLoading: function(){
            var ii = layer.load(0, {shade: false});
            setTimeout(function(){
                layer.close(ii)
            }, 3000);
        }
        ,basePass: function(){
            layer.prompt({title: '写点什么吧'}, function(value, index){
                layer.msg('你写下了：'+ value, {
                    icon: 6
                    ,shade: 0.2
                }, function(){
                    layer.close(index);
                });
            });
        }

        ,loading1: function(){
            layer.load();
            setTimeout(active.close, 1000);
        }
        ,loading2: function(){
            layer.load(1);
            setTimeout(active.close, 1000);
        }
        ,loading3: function(){
            layer.load(2);
            setTimeout(active.close, 1000);
        }
        ,loading4: function(){
            layer.msg('加载中', {
                icon: 16
                ,shade: 0.01
            });
        }
        ,loading5: function(){
            app.loading();
            setTimeout(active.close, 2000);
        }
        ,loading6: function(){
            app.loading('<div class="sk-double-bounce"><div class="sk-child sk-double-bounce1"></div><div class="sk-child sk-double-bounce2"></div></div>');
            setTimeout(active.close, 2000);
        }
        ,loading7: function(){
            app.loading('<div class="sk-folding-cube"><div class="sk-cube1 sk-cube"></div><div class="sk-cube2 sk-cube"></div><div class="sk-cube4 sk-cube"></div><div class="sk-cube3 sk-cube"></div></div>');
            setTimeout(active.close, 2000);
        }

        ,tipsTop: function(){
            layer.tips('上', this, {
                tips: [1, '#000']
            });
        }
        ,tipsRight: function(){
            layer.tips('默认就是向右的，3秒后关闭', this);
        }
        ,tipsBottom: function(){
            layer.tips('下', this, {
                tips: 3
            });
        }
        ,tipsLeft: function(){
            layer.tips('向左提示,但是左侧空间不足时显示在右侧', this, {
                tips: [4, '#78BA32']
            });
        }
        ,tipsNoKill: function(){
            layer.tips('不会销毁之前的', this, {tipsMore: true});
        }

        ,windowMax: function(){
            var index = layer.open({
                type: 2
                ,content: 'http://baidu.com'
                ,area: ['100%', '100%']
                ,maxmin: true
            });
            layer.full(index);
        }
        ,offsetBottom: function(){
            layer.msg('灵活运用 offset', {
                offset: 'b',
                anim: 6
            });
        }
        ,confirmTrans: function(){
            layer.closeAll();
            layer.msg('大部分参数都是可以公用的<br>合理搭配，展示不一样的风格', {
                time: 15*1000,
                btn: ['明白了', '知道了', '哦']
            });
        }
        ,notice: function(){
            app.notice('公告标题<br/>公告内容,在这里随意填写~~~',function(){
                location.href = 'https://www.vip-admin.com/';
            }/*,function(){
                app.msg('弹出成功后回调');
            }*/);
        }

        ,customized: function(){}
        ,add: function(){}

        ,onStart: function(){
            var type = $(this).attr('demo-type');
            active[type] && active[type].call(this);
        }

    };

    // 事件
    $('div.layui-btn-container button.layui-btn').on('click', active.onStart);
});
</script>
</body>
</html>